<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>204,你的临时文件柜！</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .hidden {
      display: none;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <h1>204,你的临时文件柜！</h1>

  <!-- 验证码验证 -->
  <div id="upload-section">
    <h2>上传文件</h2>
    <p>验证码: <strong>{{ verification_code }}</strong></p>
    <label for="verification-code">请输入验证码:</label>
    <input type="text" id="verification-code" placeholder="验证码">
    <button onclick="validateUploadCode()">验证</button>
    <p id="file-cabinet-number" class="hidden">文件柜编号: <span id="cabinet-number"></span></p>
    <input type="file" id="file-upload" class="hidden">
    <button id="upload-button" class="hidden" onclick="uploadFile()">上传文件</button>
    <p id="upload-message" class="hidden"></p>
  </div>

  <!-- 取件功能 -->
  <div id="pickup-section">
    <h2>取件</h2>
    <label for="pickup-cabinet-number">请输入文件柜编号:</label>
    <input type="text" id="pickup-cabinet-number" placeholder="文件柜编号">
    <label for="pickup-code">请输入取件码:</label>
    <input type="text" id="pickup-code" placeholder="取件码">
    <button onclick="validatePickupCode()">验证取件码</button>
    <p id="pickup-error" class="error hidden"></p>
    <button id="download-button" class="hidden" onclick="downloadFile()">下载文件</button>
  </div>

  <script>
    let cabinetNumber = null; // 文件柜编号

    function validateUploadCode() {
      const userCode = document.getElementById("verification-code").value;
      fetch("/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: userCode }),
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.success) {
            cabinetNumber = data.cabinet_number;
            document.getElementById("cabinet-number").textContent = cabinetNumber;
            document.getElementById("file-cabinet-number").classList.remove("hidden");
            document.getElementById("file-upload").classList.remove("hidden");
            document.getElementById("upload-button").classList.remove("hidden");
            alert(data.message);
          } else {
            alert(data.message);
          }
        });
    }

    function uploadFile() {
      const fileInput = document.getElementById("file-upload");
      if (fileInput.files.length > 0) {
        const formData = new FormData();
        formData.append("cabinet_number", cabinetNumber);
        formData.append("file", fileInput.files[0]);

        fetch("/upload", {
          method: "POST",
          body: formData,
        })
          .then((response) => response.json())
          .then((data) => {
            if (data.success) {
              document.getElementById("upload-message").textContent = data.message;
              document.getElementById("upload-message").classList.remove("hidden");
              alert("文件上传成功，请记住文件柜编号和取件码！");
            } else {
              alert(data.message);
            }
          });
      } else {
        alert("请选择文件！");
      }
    }

    function validatePickupCode() {
      const cabinetNumber = document.getElementById("pickup-cabinet-number").value;
      const pickupCode = document.getElementById("pickup-code").value;

      fetch("/pickup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cabinet_number: cabinetNumber, pickup_code: pickupCode }),
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.success) {
            document.getElementById("download-button").classList.remove("hidden");
            alert(data.message);
          } else {
            document.getElementById("pickup-error").textContent = data.message;
            document.getElementById("pickup-error").classList.remove("hidden");
          }
        });
    }

    function downloadFile() {
      const cabinetNumber = document.getElementById("pickup-cabinet-number").value;
      fetch(`/download/${cabinetNumber}`, {
        method: "GET",
      })
        .then((response) => {
          if (response.ok) {
            return response.blob();
          } else {
            throw new Error("文件下载失败！");
          }
        })
        .then((blob) => {
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
          a.download = `file-${cabinetNumber}`;
          document.body.appendChild(a);
          a.click();
          a.remove();
          alert("文件下载成功！");
        })
        .catch((error) => {
          alert(error.message);
        });
    }
  </script>
</body>
</html>